<style lang="scss" scoped>
.selection-outline {
  padding:5px 10px;
  display: block;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #dcdee2;
  font-size: 14px;
  position: relative;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.selection-title {
  padding: 3px 10px;
  font-size: 16px;
  font-weight: bolder;
}
</style>
<template>
  <div class="selection-outline">
    <Form :model="filter" :rules="rules" :label-width="100" :label-position="'right'">
      <Row :gutter="24" style="margin-bottom: 8px;">
        <Col :span="12">
          <FormItem :label="columns[0].title" :prop="columns[0].key" >
            <field-cell :config="{type:'text'}" v-model="filter[columns[0].key]"></field-cell>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="columns[1].title" :prop="columns[1].key" >
            <field-cell :config="{type:'text'}" v-model="filter[columns[1].key]"></field-cell>
          </FormItem>
        </Col>
        <Col :span="12">
          <Button v-if="addButton" type="primary" ghost icon="md-add" @click="handleCreate">{{lang.add}}</Button>
          <Button v-if="editButton&&!!currentRow" type="primary" style="margin-left:5px;" ghost icon="ios-create-outline" @click="handleEdit">{{lang.edit}}</Button>
          <Button v-if="deleteButton&&!!currentRow" type="error" style="margin-left:5px;" ghost icon="md-trash" @click="handleDelete">{{lang.delete}}</Button>
        </Col>
        <Col :span="12" class="ivu-text-right">
          <Button type="primary" @click="handleSearch">{{lang.search}}</Button>
          <Button class="ivu-ml-8" @click="handleReset">{{lang.reset}}</Button>
        </Col>
      </Row>
    </Form>
    <Table ref="search-basic" border :columns="[checkColumn,...columns,moreColumn]"
      :data="data" @on-row-dblclick="selectRow">
      <template slot-scope="{ row,index }" slot="check">
        <Checkbox :value="currentIndex==index" @on-change="change($event,row,index)"></Checkbox>
      </template>
      <template v-for="item in finalColumns" slot-scope="{ row,index }" :slot="item.slot">
        <span>{{row[item.slot]}}</span>
      </template>
      <template slot-scope="{ row,index }" slot="expand"></template>
    </Table>
    <Page ref="page"
          style="float: right;margin: 2px 10px 4px 0;line-height: 2;"
          :total="pageNavigation.total"
          :page-size-opts="pageSizeOpts"
          :current.sync="pageNavigation.pageNumber"
          show-total
          show-sizer
          show-elevator
          :page-size="pageNavigation.pageSize"
          @on-change="handleChangePage"
          @on-page-size-change="handleChangePageSize"
    />
    <Divider style="margin:4px 10px"/>
    <CfgStatisticsModelNewAddModal v-bind="addNewPanel" @submit="handleNewAddSubmit"></CfgStatisticsModelNewAddModal>
    <CfgStatisticsModelEditModal v-bind="editPanel" @submit="handleEditSubmit"></CfgStatisticsModelEditModal>
  </div>
</template>

<script>
export default {
  name: "cfg-template-model-selection",
  data(){
    return {
      collectionObject:null,
      classObject:null,
      filter:{},
      addNewPanel:{
        width:1024,
        zIndex:100,
        titleStyle:{},
        drawer:{
          show:false
        }
      },
      editPanel:{
        width:1024,
        zIndex:100,
        titleStyle:{},
        drawer:{
          show:false
        },
        data:{}
      },
      rules:{

      },
      checkColumn:{
        title:'',
        slot:'check',
        width:40
      },
      moreColumn:{
        type: 'expand',
        slot:'expand',
        width: 40,
        render: (h, params) => {
          return h('div', [
            h('div',`${this.lang['comments']}:`),
            h('div',params.row.comments),
            h('div',`${this.lang['version']}:${params.row.version}`),
            h('div',`${this.lang['published']}:${params.row.published}`),
            h('div',`${this.lang['createTime']}:${params.row.createTime}`),
            h('div',`${this.lang['updateTime']}:${params.row.updateTime}`),
          ])
        }
      },
      finalColumns:[],
      currentRow:null,
      currentIndex:-1
    }
  },
  props:{
    addButton:{
      default:()=>{
        return true
      }
    },
    editButton:{
      default:()=>{
        return true
      }
    },
    deleteButton:{
      default:()=>{
        return true
      }
    },
    modelName:{
      default:()=>{
        return 'statistics'
      }
    },
    pageSizeOpts:{
      default:()=>{
        return [10, 30, 50, 100];
      }
    },
    pageNavigation:{
      default:()=>{
        return { total: 0, pageSize: 10, pageNumber: 1 };
      }
    },
    filtered:{
      default:()=>{
        return {};
      }
    },
  },
  computed:{
    lang(){
      return {
        "en-US": {
          title:'Selection',
          search:'search',
          reset:'reset',
          add:'Add',
          edit:'edit',
          delete:'delete',
          comments:'comments',
          version:'version',
          published:'published',
          createTime:'createTime',
          updateTime:'updateTime'
        },
        "zh-CN": {
          title:'选择',
          search:'查询',
          reset:'重置',
          add:'添加',
          edit:'编辑',
          delete:'删除',
          comments:'注释',
          version:'版本',
          published:'已发布',
          createTime:'创建时间',
          updateTime:'更新时间'
        },
      }[this.G_Locale]
    },
    columns(){
      return [
        {
          key: 'type',
          title:{
            'zh-CN':'所属类型',
            'en-US':'type'
          }[this.G_Locale],
          minWidth: 100,
          align: 'center',
          show: true
        },
        {
          key: 'className',
          title:{
            'zh-CN':'模型类名',
            'en-US':'class name'
          }[this.G_Locale],
          minWidth: 100,
          align: 'center',
          show: true
        },
        {
          key: 'comments',
          title:{
            'zh-CN':'注释',
            'en-US':'comments'
          }[this.G_Locale],
          minWidth: 100,
          align: 'center',
          show: true
        },
      ]
    },
    data(){
      if(!!this.collectionObject){
        return this.collectionObject.records;
      }else{
        return [];
      }
    },
  },
  watch:{
    '$i18n.locale':function(){
      this.$refs.page.$forceUpdate();
      this.$refs.page.$children[0].$forceUpdate();
    }
  },
  beforeMount() {
    this.collectionObject=this.$modelObject.create(this.modelName+'ModelCollection');
    this.classObject=this.$modelObject.create(this.modelName+'Model')
    this.loadPage(this.pageNavigation,this.filtered)
  },
  mounted() {

  },
  methods:{
    loadPage(pageNavigation,filter){
      let newFilter="";
      if(this.tools.isReal(filter)){
        newFilter=this.collectionObject.util.getFilter(filter);
      }
      this.loading=true;
      this.collectionObject.queryInfoByPage(pageNavigation.pageNumber,pageNavigation.pageSize,newFilter).then(flag=>{
        if(flag){
          this.pageNavigation.total=this.collectionObject.total;
          this.loading=false;
        }else{
          this.loading=false;
        }
      })
    },
    getRecord(filter){
      let newFilter=this.collectionObject.util.getFilter(filter);
      return this.classObject.query(newFilter).then(flag=>{
        if(flag){
          return this.classObject.record;
        }else{
          return false;
        }
      })
    },
    deleteRecord(ids){
      let _this=this;
      this.loading=true;
      return this.collectionObject.deleteByIds(ids).then(flag=>{
        if(flag){
          ids.forEach(id=>{
            let index=_this.collectionObject.records.findIndex(item=>item.id===id);
            if(index!==-1){
              _this.collectionObject.records.splice(index,1)
            }
          })
          this.loading=false;
          return true;
        }else{
          this.loading=false;
          return false;
        }
      })
    },
    handleSearch(){
      this.pageNavigation.pageNumber=1;
      this.loadPage(this.pageNavigation,this.filter)
    },
    handleReset(){
      this.filter={};
      this.pageNavigation.pageNumber=1;
      this.loadPage(this.pageNavigation,this.filter)
    },
    handleCreate(){
      this.$set(this.addNewPanel.drawer,'show',true)
    },
    handleNewAddSubmit(data){
      this.loading=true;
      this.classObject.add(data).then(flag=>{
        if(flag){
          this.collectionObject.records.unshift(this.classObject.record);
          this.loading=false;
          this.$set(this.addNewPanel.drawer,'show',false)
        }else{
          this.loading=false;
        }
      })
    },
    async handleEdit(){
      this.loading=true;
      if(await this.getRecord({type:this.currentRow.type,className:this.currentRow.className})){
        this.$set(this.editPanel,'data',this.classObject.record);
        this.$set(this.editPanel.drawer,'show',true);
        this.loading=false;
      }else{
        this.loading=false;
      }
    },
    handleEditSubmit(data){
      this.loading=true;
      this.classObject.setRecord(data);
      this.classObject.update().then(flag=>{
        if(flag){
          let index=this.collectionObject.records.findIndex(item=>item.id===this.classObject.record.id);
          if(index!==-1){
            this.collectionObject.records.splice(index,1,this.classObject.record)
          }
          this.loading=false;
          this.$set(this.editPanel.drawer,'show',false);
        }else{
          this.loading=false;
        }
      })
    },
    handleDelete(){
      if(!!this.currentRow){
        this.collectionObject.deleteByIds([this.currentRow.id]).then(flag=>{
          if(flag){
            this.collectionObject.records.splice(this.currentIndex,1);
            this.loading=false;
            this.currentIndex=-1;
            this.currentRow=null;
          }
        })
      }
    },
    selectRow(row,index){
      this.currentRow=row;
      this.currentIndex=index;
      this.submit();
    },
    change(val,row,index){
      if(val){
        this.currentRow=row;
        this.currentIndex=index;
      }else{
        this.currentRow=null;
        this.currentIndex=-1;
      }
      // this.submit();
    },
    submit(){
      this.$emit('submit',this.currentRow)
    },
    handleChangePage(page) {
      this.pageNavigation.pageNumber = page;
      this.loadPage(this.pageNavigation,this.filter)
    },
    // 切换每页条数
    handleChangePageSize(size) {
      this.pageNavigation.pageNumber = 1;
      this.pageNavigation.pageSize = size;
      this.loadPage(this.pageNavigation,this.filter)
    },
  }
}
</script>
